<!--登录页-->
<template>

  <div class="flex flex-col h-screen">

    <div class="hero bg-base-200 w-full h-full">

      <div class="hero-content flex-row h-full w-full">

        <div class="text-left w-64 shrink-0">
          <h1 class="text-3xl font-bold" @click="clickDing">{{ title }}</h1>
          <p class="py-6 text-gray-500">
            {{ description }}
          </p>
        </div>

        <div class=" card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
          <!--登录表单-->
          <div class="card-body">
            <fieldset class="fieldset">
              <label class="label">账号或Email</label>
              <input type="email" class="input" v-model="account" required placeholder="Username/Email"/>
              <label class="label">密码</label>
              <input type="password" class="input" v-model="password" required placeholder="Password"/>
              <button class="btn btn-primary mt-4" @click.prevent="clickLogin">登 录</button>
              <label class="label">
                <a href="javascript:void(0)" class="label-text-alt link link-hover"
                   @click="toLookForPassword">忘记密码?</a>
                <a href="javascript:void(0)" class="label-text-alt link link-hover ml-auto"
                   @click="toRegister"><span class="text-primary/60 text-sm">点击注册</span></a>
              </label>
            </fieldset>
          </div>
        </div>

      </div>
    </div>

    <div class="h-12 flex flex-row px-4 ">
      <button class="ml-auto btn btn-link btn-info" @click="()=>{}">简体中文</button>
    </div>
  </div>
</template>
<script setup>
import {inject, onMounted, onUnmounted, reactive, watch, ref} from 'vue';
import {useRouter} from 'vue-router';
import {useUserStore} from '@/stores/user.ts'
import {useChatStore} from '@/stores/chat.ts'
import 'element-plus/es/components/message/style/css';
import {ElMessage} from 'element-plus'

const userStore = useUserStore()
const chatStore = useChatStore()

const router = useRouter()


const title = "Login now!"
const description = "Wishes you every day happily"

const account = ref('');
const password = ref('');


/**
 * 登录
 */
const clickLogin = async () => {

  if (account.value && password.value) {

    let token = await userStore.logIn(account.value, password.value, "")

    window.user.loginCallback(token)
    //刷新好友列表
    // await chatStore.refreshContactList();
    // await chatStore.refreshChatGroupList();
    // await chatStore.refreshChatterRelationList();

    window.chatService.connect(token.accessToken,token.userId);

    toHome()
  } else {
    ElMessage.warning("username 或password不能为空")
  }

}


/**
 * 路由到主页面
 */
const toHome = () => {
  router?.replace({path: '/'})
}


const toRegister = () => {
  console.log("click toRegister...")
  router?.replace({path: '/register'})
}
/**
 * 路由到找回密码页
 */
const toLookForPassword = () => {
  // router?.replace({ path: '/sign' })
}

const clickDing = () => {
  console.debug("clickDing...")
  // playNoticeMusic();
}

</script>
<style scoped>

</style>